<template>
  <!-- 工作情况统计Echarts图 -->
  <div class="situationEcharts-box">
    <div class="echartsBox" ref="EchartsBox"></div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import { getCurrentInstance } from "vue" //访问内部组件实例
const { appContext } = getCurrentInstance()
const { $echarts, fontSize } = appContext.config.globalProperties
const EchartsBox = ref(null)
onMounted(() => {
  nextTick(() => {
    initEcharts()
  })
  addEventListener("resize", () => {
    initEcharts()
  })
})
const initEcharts = () => {
  let myChart = $echarts.getInstanceByDom(EchartsBox.value)
  if (myChart) {
    // 如果不存在，就进行初始化
    myChart.dispose()
  }
  myChart = $echarts.init(EchartsBox.value)
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
      //formatter: '{a}<br />{c}'
    },
    grid: {
      top: "20%",
      left: "0%",
      right: "8%",
      bottom: "3%",
      containLabel: true
    },
    yAxis: {
      // boundaryGap: true,
      data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      axisLabel: {
        color: "rgba(158, 158, 158)",
        fontSize: 12
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(158, 158, 158)"
        }
      },
      axisTick: {
        show: false
      }
    },
    xAxis: [
      {
        name: "小时",
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#c1cdd1",
            type: "dashed"
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(158, 158, 158)"
          }
        },
        axisLabel: {
          color: "rgba(158, 158, 158)",
          fontSize: 12
        },
        nameTextStyle: {
          color: "rgba(158, 158, 158)",
          padding: [0, 0, -5, 0],
          fontSize: 12
        },
        axisTick: {
          show: false
        }
      }
    ],
    legend: {
      icon: "rect", //长方形
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 10,
      align: "left",
      selectedMode: true, // 关闭图例的选择模式
      // top: "2%",
      right: "50%",
      textStyle: {
        color: "black",
        fontSize: 10
      },
      data: ["A项目", "B项目", "C项目"]
    },

    series: [
      {
        name: "A项目",
        type: "bar",
        stack: "total",
        barWidth: 10,
        itemStyle: {
          normal: {
            // color: "#c5f1ff"
          }
        },
        data: [1, 2, 3, 4, 5, 6, 7, 4]
      },
      {
        name: "B项目",
        type: "bar",
        stack: "total",
        barWidth: 10,
        itemStyle: {
          normal: {
            // color: "#eaffdc"
          }
        },
        data: [1, 2, 3, 4, 5, 6, 7, 2]
      },
      {
        name: "C项目",
        type: "bar",
        stack: "total",
        barWidth: 10,
        itemStyle: {
          normal: {
            // color: "#eaffdc"
          }
        },
        data: [1, 2, 3, 4, 5, 6, 7, 2]
      }
    ]
  }
  // 这个方法的目的是为了跟随盒子大小改变而改变
  setTimeout(() => {
    myChart.resize()
  }, 1000)
  myChart.setOption(option)
}
</script>
<style scoped lang="less">
.situationEcharts-box {
  width: 100%;
  height: 100%;
  .echartsBox {
    width: 100%;
    height: 100%;
  }
}
</style>
